<template>
  <div class="bottom-tool">
    <div class="tools">
      <template v-for="item in tools" :key="item.name">
        <div class="item" v-if="item.text !== '地图测量'">
          <div class="icons">
            <router-link :to="item.path">
              <i :class="['iconfont', item.name]" :style="[
                  item.text == '城市预览' ? style : '', 
                  item.text == '范围査询' ? style2 : '',
                ]"></i>
            </router-link>
          </div>
          <div class="text">{{ item.text }}</div>
        </div>
        <el-popover :width="160" v-else>
          <template #reference>
            <div class="item">
              <div class="icons">
                <i class="iconfont icon-celianggongju"></i>
              </div>
              <div class="text">地图测量</div>
            </div>
          </template>
          <template #default>
            <div class="measure-tool">
              <div class="measure-icons" v-for="draw in drawArr">
                <router-link :to="draw.path">
                  <i :class="['iconfont', draw.name, 'measure-icon']"></i>
                </router-link>
              </div>
            </div>
          </template>
        </el-popover>
      </template>
    </div>
  </div>
</template>

<script setup>
const drawArr = [
  { name: 'icon-a-yuanxing29', path: '/measure/point' },
  { name: 'icon-xian', path: '/measure/line' },
  { name: 'icon-huaduobianxing', path: '/measure/polygon' },
  { name: 'icon-xingzhuang-juxing', path: '/measure/rect' },
  { name: 'icon-yuanxing', path: '/measure/circle' }
]

const tools = [
  { name: "icon-diqiu", text: "地球自转", path: "/earth" },
  { name: "icon-kongzhitai", text: "控制中心", path: "/plot" },
  { name: "icon-qiaoliang", text: "武汉桥梁", path: "/bridge" },
  { name: "icon-feijizhong", text: "城市预览", path: "/map" },
  { name: "icon-chaxun", text: "范围査询", path: "/search" },
  { name: "icon-celianggongju", text: "地图测量"},
  { name: "icon-hangbandongtai", text: "飞行途径", path: "/fly" },
  { name: "icon-feng", text: "中国风场", path: "/chinawind" },
  { name: "icon-feng", text: "全球风场", path: "/globewind" },
]

const style = {
  "font-size": "25px",
}
const style2 = {
  "font-size": "25px",
}
</script>
<style scoped>
@import url("https://at.alicdn.com/t/c/font_4625996_2r404xpn3fi.css");
.bottom-tool {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100vw;
  background-image: url(../assets/images/xzd-header.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 70px;
  transform: rotate(180deg);
  display: flex;
  justify-content: center;
  font-size: 15px;
  color: white;
}
.tools {
  transform: rotate(180deg);
  margin-bottom: 10px;
  display: flex;
}
.icons {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background-color: rgb(0, 0, 201);
  opacity: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.iconfont {
  display: block;
  font-size: 15px;
  color: white;
  margin: 0 auto;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
}
.text {
  font-size: 12px;
}
.measure-tool {
  font-size: 15px !important;
  color: black;
  height: 100%;
}
.measure-icon {
  font-size: 15px !important;
  color: black;
}
.measure-icons {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}
:deep() .el-popper .is-light .el-popover {
  background-color: transparent !important;
  border: unset !important;
}
:deep() .el-popper .is-light {
  background-color: transparent !important;
}
</style>
